<template>
  <aside class="index-aside">
    <div class="aside-item login" @click="login" v-if="!this.$store.state.loginState">
      <p>登录</p>
      <div class="animate animate1"></div>
      <div class="animate animate2"></div>
    </div>
    <div class="qqqun aside-item">
      <a href="https://jq.qq.com/?_wv=1027&k=5brvYwT" class="qqlink">
        <img src="../../../../assets/img/qq.png" alt="点击加入qq群">
        <div class="qq-content">
          <p class="qq-content-title">点击加入QQ群</p>
          <p class="qq-content-con">意见收集与问题反馈</p>
        </div>
      </a>
      <div class="qqimg-big">
        <img src="../../../../assets/img/qq.png">
      </div>
    </div>
    <div class="user aside-item">
      <header class="user-title">你可能感兴趣的人</header>
      <ul class="user-list">
        <li class="user-item">
          <router-link to="/user" class="user-link">
            <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKY699wKpk7qh7kaZBEQd30oc24Y5GnsuIX1ExhyBpeG1r4qhbgCojmQE7yGg8nD0GUsKq7s8q0yg/132" alt="用户头像" class="user-photo">
            <div class="user-content">
              <p class="user-name">风来叶落</p>
              <p class="user-desc">十里青山站长</p>
            </div>
          </router-link>
        </li>
        <li class="user-item">
          <router-link to="/user" class="user-link">
            <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKY699wKpk7qh7kaZBEQd30oc24Y5GnsuIX1ExhyBpeG1r4qhbgCojmQE7yGg8nD0GUsKq7s8q0yg/132" alt="用户头像" class="user-photo">
            <div class="user-content">
              <p class="user-name">一只小猫咪</p>
              <p class="user-desc">一名骄傲的产品经理</p>
            </div>
          </router-link>
        </li>
        <li class="user-item">
          <router-link to="/user" class="user-link">
            <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKY699wKpk7qh7kaZBEQd30oc24Y5GnsuIX1ExhyBpeG1r4qhbgCojmQE7yGg8nD0GUsKq7s8q0yg/132" alt="用户头像" class="user-photo">
            <div class="user-content">
              <p class="user-name">牧云</p>
              <p class="user-desc">孤独的PHP程序员</p>
            </div>
          </router-link>
        </li>
        <li class="user-item">
          <router-link to="/user" class="user-link">
            <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKY699wKpk7qh7kaZBEQd30oc24Y5GnsuIX1ExhyBpeG1r4qhbgCojmQE7yGg8nD0GUsKq7s8q0yg/132" alt="用户头像" class="user-photo">
            <div class="user-content">
              <p class="user-name">秋风啊</p>
              <p class="user-desc">努力学习前端ing</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="lable aside-item">
      <header class="lable-title">
        <div class="title">热门标签</div>
        <router-link to="/" class="lable-link">查看更多</router-link>
      </header>
      <ul class="lable-list">
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">开源</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">JavaScript</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">算法</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">大数据</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">PHP</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">人工智能</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">前端</router-link>
        </li>
        <li class="lable-item">
          <router-link to="/" class="lable-item-link">GitHub</router-link>
        </li>
      </ul>
    </div>
    <div class="about">
      <ul class="about-list">
        <li class="about-item">
          <router-link class="about-link" to="/">关于</router-link>
        </li>
        <li class="about-item">
          <router-link class="about-link" to="/">建议反馈</router-link>
        </li>
        <li class="about-item">
          <router-link class="about-link" to="/">友情链接</router-link>
        </li>
        <li class="about-item">
          <router-link class="about-link" to="/">加入我们</router-link>
        </li>
      </ul>
      <ul class="about-list">
        <li class="about-item">
          <router-link class="about-link" to="/">商务合作</router-link>
        </li>
        <li class="about-item">
          <router-link class="about-link" to="/">隐私政策</router-link>
        </li>
        <li class="about-item">
          <router-link class="about-link" to="/">使用前必读</router-link>
        </li>
      </ul>
      <div>
        <a class="about-link" href="http://www.miibeian.gov.cn">豫ICP备16006458号-2</a>
      </div>
      <div>
        <p>©2018十里青山</p>
      </div>
    </div>
  </aside>
</template>

<script>
export default {
  name: '',
  methods: {
    login () {
      this.common.showLogBox(this)
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.index-aside
  position absolute
  top 0
  right 0
  width 4.8rem
  .aside-item
    background $theme-background
    box-shadow 0 1px 2px 0 rgba(0,0,0,.05)
    margin-bottom .32rem
    border-radius .04rem
    line-height 1.3
    &.login
      text-align center
      padding .4rem 0
      font-size .47rem
      background $theme-5-color
      color $theme-background
      cursor pointer
      position relative
      overflow hidden
      transition all .6s
      &:hover
        background $theme-color
      p
        position relative
        z-index 2
      .animate
        position absolute
        width 12.04rem
        height 1.4rem
        top 0
        left 0
        background url('img/login_bg.png')
        background-size 100% 100%
        &.animate1
          animation scrollRight 20s linear infinite
        &.animate2
          transform rotateX(180deg) rotateY(180deg)
          animation scrollRight 16s linear infinite
        @keyframes scrollRight
          0%
            left 0
          100%
            left -6.02rem
    &.qqqun
      position relative
      &:hover
        .qqimg-big
          // display block
          right 105%
          top -.2rem
          opacity 1
          max-width 100%
          padding .3rem
      .qqimg-big
        position absolute
        right 100%
        top 0
        padding 0
        background $theme-background
        box-shadow 0 1px 5px 3px rgba(0,0,0,.05)
        transition all .3s
        max-width 0
        opacity 0
        overflow hidden
      .qqlink
        padding .31rem
        display flex
        align-items center
        .qq-content
          margin-left .2rem
          .qq-content-title
            font-weight bold
          .qq-content-con
            color $theme-3-color
            margin-top .14rem
        img
          height 1rem
          width 1rem
    &.user
      .user-title
        padding .24rem .32rem
        font-size .28rem
        border-bottom .02rem solid rgba(0,0,0,.01)
      .user-list
        .user-link
          display flex
          align-items center
          padding .24rem .32rem
          &:hover
            background rgba(0,0,0,.02)
          .user-photo
            width .72rem
            border-radius 50%
          .user-content
            margin-left .18rem
            .user-name,.user-desc
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
            .user-desc
              color $theme-3-color
    &.lable
      .lable-title
        padding 0 .3rem
        display flex
        line-height .9rem
        border-bottom .02rem solid rgba(0,0,0,.02)
        .title
          flex 1
        .lable-link
          color $theme-color
      .lable-list
        padding .3rem
        display flex
        flex-wrap wrap
        .lable-item-link
          background #f3f6f3
          margin 0 .24rem .24rem 0
          padding 0 .44rem
          line-height .6rem
          display block
          border-radius .3rem
          &:hover
            background #0c0
            color #fff
  .about
    font-size .24rem
    line-height 1.9
    color $theme-3-color
    .about-link
      color inherit
      &:hover
        color $theme-color
    .about-list
      display flex
      .about-item
        padding-right .32rem
        position relative
        &:after
          content ''
          position absolute
          margin 0 .14rem
          top 40%
          right 0
          width .04rem
          height .04rem
          border-radius 50%
          background $theme-3-color
        &:last-child:after
          display:none

@media only screen and (max-width: 700px)
  .index-aside
    display none
</style>
